<template>
    <div>
        <el-table :data="magetlist" border style="width: 100%">
            <el-table-column prop="uid" label="用户编号">
            </el-table-column>
            <el-table-column prop="username" label="用户名称" align="center">
            </el-table-column>
            <el-table-column prop="rolename" label="所属角色" align="center">
            </el-table-column>
            <el-table-column prop="status" label="状态" align="center">
                <template slot-scope="item">
                    <!-- item.row 代表的是table中的每一行数据 -->
                    <div>
                        <!-- {{item.row}} -->
                        <!-- {{ item.row.status == 1 ? "启用" : "禁用" }} -->
                        <el-tag v-if="item.row.status == 1" type="success">启用 </el-tag>
                        <el-tag type="danger" v-else> 禁用</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
                <template slot-scope="item">
                    <el-button type="primary" icon="el-icon-edit" @click="edit(item.row.uid)" circle></el-button>
                    <el-button type="danger" icon="el-icon-delete" @click="del(item.row.uid)" circle></el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @current-change="getpage" background :page-size="3" layout="prev, pager, next" :total="getpages">
        </el-pagination>
    </div>
</template>

<script>
import {userdelete,} from '../../request/app'
import { mapGetters, mapActions } from 'vuex'
export default {
    data() {
        return {
        };
    },
    methods: {
        ...mapActions({
            ACsetlist: 'setmange/ACsetlist',
            ACsetpage: 'setmange/ACsetpage',
            ACgetpage: 'setmange/ACgetpage'
            // ACgetlistpeo:'setpeople/ACgetlistpeo'
        }),
        // 改变下标传递页数
        getpage(e) {
            // console.log(e);
            this.ACsetpage(e)
        },
        // 修改
        edit(uid) {
            this.$emit('manedit', uid)

        },
        // 删除
        del(uid) {
            // console.log(uid);
            userdelete({
                uid
            }).then(res => {
                console.log(res);
                this.ACsetlist()
            })
        }
    },
    computed: {
        ...mapGetters({
            magetlist: 'setmange/getlist',
            getpages: 'setmange/getpages',
            // peogetlist : 'setpeople/getlist'
        })
    },
    mounted() {
        // this.ACgetlistpeo()
        // 获取并渲染数据列表
        this.ACsetlist()
        this.ACgetpage()
        // console.log(this.magetlist);
        // console.log(this.peogetlist);
        // usercount().then(res => {
        //     // console.log(res);
        //     this.manges = res.list[0].total
        // })

    },
    components: {
    },
}
</script>

<style scoped>
</style>
